<template>
  <div style="background: #757575;height: 100%">
    <div class="customer-service">
      <P style="font-size: 18px;text-align: center;height: 40px;padding: 5px;line-height: 40px;">{{to}}</P>
      <div class="customer-service-body" ref="service">
        <div v-for="item in msgList">
          <div class="service-msg" v-if="item.username==to">
            <div style="flex: 1">
              <img class="icon-img"
                   src="https://cnbj0.fds.api.xiaomi.com/b2c-kfs-media/png220127-b2761e59775e64e0f1fed476effc7daf.png"
                   width="40px">
            </div>
            <div class="chatinfo"><p>{{item.msg}}</p></div>
          </div>

          <div class="customer-msg" v-if="item.username==username&&item.identity=='orderGoods'">
            <div style="flex: 3;">
              <div class="order-card">
                <div style="display: flex">
                  <div style="flex: 1"><img  width="70px" :src="item.imgurl"></div>
                  <div style="flex: 1;">
                    <P style="color: black;font-size: 12px;overflow: hidden;height: 40px">{{item.goodsName}}</P>
                    <P style="color: #FF6600;font-size: 16px">￥{{item.price}}</P>
                  </div>
                </div>
                <p style="border-top: 1px solid #edeaea;color: #b0b0b0;line-height: 20px">旗舰店</p>
              </div>

            </div>
            <div style="flex: 1">
              <img class="icon-img"
                   src="https://cnbj0.fds.api.xiaomi.com/b2c-kfs-media/png220127-b2761e59775e64e0f1fed476effc7daf.png"
                   width="40px">
            </div>
          </div>

          <div class="customer-msg" v-if="item.username==username&&item.identity=='order'">
            <div style="flex: 3;">
              <div class="order-card">
                <p style="color: black;font-size: 16px">你正在咨询的订单</p>
                <div style="display: flex">
                  <div><img  width="35px" :src="item.imgurl"></div>
                  <div style="flex: 2;background: #e1e1e1">
                    <P style="color: black;font-size: 12px;overflow: hidden;height: 20px">{{item.goodsName}}</P>
                    <P>共计{{item.quantity}}件商品:{{item.totalPrice}}元</P>
                  </div>
                </div>
                <p>订单号:{{orderNo}}</p>
                <p>创建时间:{{item.createTime}}</p>

              </div>

            </div>
            <div style="flex: 1">
              <img class="icon-img"
                   src="https://cnbj0.fds.api.xiaomi.com/b2c-kfs-media/png220127-b2761e59775e64e0f1fed476effc7daf.png"
                   width="40px">
            </div>
          </div>
          <div class="customer-msg" v-if="item.username==username&&item.identity=='client'">
            <div class="chatinfo-customer"><p>{{item.msg}}</p></div>
            <div style="flex: 1">
              <img class="icon-img"
                   src="https://cnbj0.fds.api.xiaomi.com/b2c-kfs-media/png220127-b2761e59775e64e0f1fed476effc7daf.png"
                   width="40px">
            </div>
          </div>
        </div>
      </div>
      <div class="order-Tip" style="height: 80px;position: absolute;z-index: 999;bottom: 80px;width: 90%" v-show="tipShow">
        <div class="order-Tip-body" v-if="orderMsg.itemList">
          <div style="flex: 1"><img  style="width: 50px;margin-left: 10px" :src="orderMsg.itemList[0].imgurl"></div>
          <div style="flex: 2">
            <div style="display: flex;flex-direction: column">
              <p style="font-size: 16px">你可能想咨询该订单</p>
              <p>共计{{orderMsg.itemList[0].quantity}}件商品:合计￥{{orderMsg.itemList[0].totalPrice}}元</p>
            </div>
          </div>
          <div style="flex: 1;padding: 0px 5px;display: flex;flex-direction: column">
            <P style="text-align: right;margin-right: 10px;font-size: 16px" @click="tipShow=false">X</P>
             <a  @click="sendOrder()" style="display: block;background: #FF6600;text-align: center;color: white;border-radius: 10px;margin-top: 5px; height: 25px;line-height: 25px">发送订单</a>
          </div>
        </div>

      </div>





<!--想咨询的商品 -->
      <div class="order-Tip" style="height: 80px;position: absolute;z-index: 999;bottom: 80px;width: 90%" v-show="orderShow">
        <div class="order-Tip-body" >
          <div style="flex: 1"><img  style="width: 50px;margin-left: 10px"  :src="orderGoodsMSg.image"></div>
          <div style="flex: 2">
            <div style="display: flex;flex-direction: column">
              <p style="font-size: 16px;height: 40px;overflow: hidden">{{orderGoodsMSg.name}}</p>
              <P style="color: #FF6600;line-height: 25px;font-size: 16px">{{orderGoodsMSg.price}}</P>
            </div>
          </div>
          <div style="flex: 1;padding: 0px 5px;display: flex;flex-direction: column">
            <P style="text-align: right;margin-right: 10px;font-size: 16px" @click="orderShow=false">X</P>
            <a  @click="sendGoods()" style="display: block;background: #FF6600;text-align: center;color: white;border-radius: 10px;margin-top: 5px; height: 25px;line-height: 25px">发给客服</a>
          </div>
        </div>

      </div>

      <div class="customer-service-btoom">
        <el-row style="padding: 0px 10px">
          <el-col :span="18">
            <el-input v-model="msg" placeholder="我想问...." @change="put"></el-input>
          </el-col>
          <el-col :span="6">
            <div class="icon">
              <img width="30px"
                   src="">
            </div>
            <div class="icon">
              <img width="30px"
                   src="">
            </div>

          </el-col>
        </el-row>

      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "customerService",
    data() {
      return {
        username: sessionStorage.getItem("username"),
        to: "",
        msg: "",
        path: "ws://www.zbclmg.xyz:8081/webSocket/" + this.username,
        socket: "",
        goodsid:0,
        orderNo:0,
        tipShow:false,
        orderShow:false,
        orderMsg:{},
        orderGoodsMSg:{},
        msgList: [
          {
            name: "kf", msg: "请问有什么可以帮你"
          },
          {
            name: "kf", msg: "请问有什么可以帮你1"
          },
          {
            name: "lmg", msg: "介绍一下产品"
          },
          {
            name: "lmg", msg: "产品的优点"
          }

        ]
      }

    },
    mounted() {
      this.to = this.$route.query.store_id
      this.orderNo=this.$route.query.orderNo
      this.goodsid=this.$route.query.goodsid
      if(this.orderNo!=undefined){
        this.tipShow=true
      }
      else if(this.goodsid!=undefined){
        this.orderShow=true
      }
      this.initData()
      this.connectWebsocket()
    },
    beforeDestroy() {
      this.socket.close()
    },
    methods: {
      sendGoods(){
        this.orderShow=false
        let msgBody = {
          username: this.username,
          to: this.to,
          identity: 'orderGoods',
          imgurl: this.orderGoodsMSg.image,
          goodsName:this.orderGoodsMSg.name,
          msg:"keyorderGoods",
          price:this.orderGoodsMSg.price,
        }
        this.msgList.push(msgBody)
        this.socket.send(JSON.stringify(msgBody))
        this.scroler()
      },
      sendOrder(){
        this.tipShow=false
        let msgBody = {
          username: this.username,
          to: this.to,
          identity: 'order',
          imgurl: this.orderMsg.itemList[0].imgurl,
          goodsName: this.orderMsg.itemList[0].productName,
          count:this.orderMsg.itemList[0].quantity,
          totalPrice:this.orderMsg.itemList[0].totalPrice,
          createTime:this.orderMsg.orderList.createTime,
          msg: "keyOrder",
        }
        this.msgList.push(msgBody)
        this.socket.send(JSON.stringify(msgBody))
        this.scroler()
        console.log(this.msgList)

      },
      scroler(){
        this.$nextTick(() => {
          this.$refs.service.scrollTop = this.$refs.service.scrollHeight;
        });

      },
      put(value) {
        this.msg=""
        let msgBody = {
          username: this.username,
          to: this.to,
          identity: 'client',
          msg: value,
        }
        this.msgList.push(msgBody)
        this.socket.send(JSON.stringify(msgBody))
       this.scroler()
      },
      initData() {
        this.$axios.post('/message', {
          username: this.username,
          to: this.to,
          identity: 'client',
          msg: "323"
        }).then((res) => {
          this.msgList = res
          this.scroler()
          if(this.orderNo!=undefined){
            this.$axios.get('/orders/getOrderDetialByNo',{params:{id:this.orderNo}}).then((res)=>{
              this.orderMsg=res
            })
          }
          if (this.goodsid!=undefined){
            this.$axios.get('/goods/getGoodInfoById',{params:{good_id:this.goodsid}}).then((res)=>{
                 this.orderGoodsMSg=res.data
            })
          }
          console.log(this.msgList)
          this.scroler()
        })

      },
      connectWebsocket() {
        if (typeof (WebSocket) === "undefined") {
          alert("您的浏览器不支持socket")
        } else {
          // 实例化socket
          this.socket = new WebSocket('ws://www.zbclmg.xyz:8081/webSocket/' + this.username)
          // 监听socket连接
          this.socket.onopen = this.open
          // 监听socket错误信息
          this.socket.onerror = this.error
          // 监听socket消息
          this.socket.onmessage = this.getMessage
        }
      },
      open: function () {
        console.log("socket连接成功")
      },
      error: function () {
        // alert("出错")
        console.log("连接错误")
      },
      getMessage: function (msgb) {
        let msgBody={
          username:this.to,
          msg:msgb.data,
          to:this.username
        }
        this.msgList.push(msgBody)
        this.scroler()
      },
      send: function () {
        this.socket.send(params)
      },
      close: function () {
        alert("已关闭")
        console.log("socket已经关闭")
      }

    }

  }
</script>

<style scoped>
  .order-card{
    background: #ffffff ;
    padding: 10px 20px;
    border-radius: 20px;
    width: 65%;
    float: right;
    /*display: flex;*/
    /*flex-direction: column;*/
  }
  .order-Tip{
  padding: 10px;

  }
  .order-Tip-body{
    display: flex;
    align-items: center;
    height: 70px;
    justify-content: center;
    background: #ffffff;
    border-radius: 10px;
  }

  a{
    cursor: pointer;
  }
  .customer-service {
    position: relative;
    width: 400px;

    margin: 0 auto;
    height: 100%;
    background: #eeeeee;
  }

  .customer-service-body {
    height: 85%;
    overflow: scroll;
    overflow-x: hidden;
  }

  .customer-service-btoom {

  }

  .service-msg {
    display: flex;
    align-items: center;
    padding: 10px;
  }

  .customer-msg {
    display: flex;
    align-items: center;
    padding: 10px;
  }

  .icon-img {
    margin-left: 20px;
  }

  .chatinfo {
    flex: 3;

    min-height: 30px;
    padding: 5px;
  }

  .chatinfo-customer {
    flex: 3;
    min-height: 30px;
    padding: 5px;
  }

  .chatinfo-customer p {
    background: rgb(253, 224, 131);
    white-space: inherit;
    text-overflow: ellipsis;
    display: inline-block;
    padding: 5px 10px;
    float: right;
    line-height: 30px;
    border-radius: 10px;
    word-break: break-all;
  }

  .chatinfo p {
    background: #ffffff;
    white-space: inherit;
    text-overflow: ellipsis;
    display: inline-block;
    padding: 5px 10px;
    line-height: 30px;
    border-radius: 10px;
    word-break: break-all;

  }

  .icon {
    width: 50%;
    float: left;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

</style>
